<!DocType html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>test</title>


    <style type="text/css">


        body,html{
            height: 80%;
        }
        #parent{
            height:100%;
            background-color:#F8F8F8;
            display: flex;
            justify-content: space-between;
            flex-direction: column;
        }
        div.child1{
            height: 100px;
            background-color: #444488;
        }
        div.child2{
            flex:1;
            background-color: #888888;
            display: flex;
        }
        div.child3{
            height: 100px;
            background-color: #D0D0D0;
        }
        div.child4{
            width: 100px;
            background-color: #F1F1F1;
        }
        div.child5{
            flex:1;
            background-color:lightgreen;
        }
        div.child6{
            width: 100px;
            background-color: #F1F1F1;
        }

    </style>
    <script src="../js/autoQR.js"></script>

</head>
<body>

<div id="parent">
    <div class="child1">top</div>
    <div class="child2">
        <div class="child4">left</div>
        <div class="child5">maincontent</div>
        <div class="child6">right</div>
    </div>
    <div class="child3">footer</div>
</div>


</body>
</html>